<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我要用车</title>
		<link rel="stylesheet" type="text/css" href="../css/Reimbursement.css" />
		<link type="text/css" href="../css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
		<link type="text/css" href="../css/jquery-ui-timepicker-addon.css" rel="stylesheet" />
		<script type="text/javascript" src="../js/jquery.min.js" charset="utf-8"></script>
		<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery-ui-1.8.17.custom.min.js"></script>
		<script type="text/javascript" src="../js/jquery-ui-timepicker-addon.js"></script>
		<script type="text/javascript" src="../js/jquery-ui-timepicker-zh-CN.js"></script>
		<meta name="viewport" content=" height=device-height,
			          width=device-width,
			          initial-scale=1.0,
			          minimum-scale=1.0,
			          maximum-scale=1.0,
			          user-scalable=no" />
		<script type="text/javascript">
			var ip = localStorage.getItem("ip");
			var token = localStorage.getItem("token");
			var userId = localStorage.getItem("userId");
			var userName = localStorage.getItem("name");
			$(function() {
				$.ajax({
					type: 'post', //类型
					url: ip + 'car/list', //请求路径
					contentType: 'application/x-www-form-urlencoded', //默认
					dataType: 'json', //返回数据类型  可以是text：字符串  可以是json：json对象
					data: {
						'userId': userId,
						'token': token,
					}, //数据
					success: function(result) {
						if(result.code == 200) {
							for(var Key in result.data) {
								var carId = result.data[Key].id;
								var carNum = result.data[Key].carNum;
								var txts = '<option value="' + carId + '">' + carNum + '</option>';
								$("#carNum").append(txts);
							}
							var carName = result.data[0].carName;
							document.getElementById('carName').value = carName;
						} else {
							alert('获取数据异常,请重新登录');
							//window.location.href = 'Login.html';
						}
					},
					error: function(data) {
						//若果传过来的数据为空
					}
				});
				//加载当前时间
				var initializationTime = (new Date()).getTime();
				var now = new Date();
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var day = now.getDate();
				var hours = now.getHours();
				var minutes = now.getMinutes();
				var seconds = now.getSeconds();
				var data = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				if("结束行程" == localStorage.getItem("state")) {
					$(".end").show();
					$("#endTrip").show();
					$(".trip").show();
					document.getElementById('endTime').value = data;
					$("#endTime").datetimepicker({
						showSecond: true,
						timeFormat: 'hh:mm:ss',
						stepHour: 1,
						stepMinute: 1,
						stepSecond: 1
					})
				} else {
					$(".start").show();
					$("#startTrip").show();
					document.getElementById('startTime').value = data;
					$("#startTime").datetimepicker({
						showSecond: true,
						timeFormat: 'hh:mm:ss',
						stepHour: 1,
						stepMinute: 1,
						stepSecond: 1
					})
				}
			})

			function start() {
				//时间地点描述备注状态
				var startPlace = document.getElementById('startPlace').value;
				var startTime = document.getElementById('startTime').value;
				if(startPlace == '') {
					alert('起始地点不能为空');
				} else {
					localStorage.setItem("state", "结束行程");
					localStorage.setItem("startPlace", startPlace);
					localStorage.setItem("startTime", startTime);
				}
				location.reload([true]);
			}

			function carNumSelect() {
				var objS = document.getElementById("carNum");
				var index = objS.selectedIndex;
				var carId = objS.options[index].value;
				localStorage.setItem("carId", carId);
				$.ajax({
					type: 'post', //类型
					url: ip + 'car/carDet', //请求路径
					contentType: 'application/x-www-form-urlencoded', //默认
					dataType: 'json', //返回数据类型  可以是text：字符串  可以是json：json对象
					data: {
						'carId': carId,
						'token': token,
					}, //数据
					success: function(result) {
						if(result.code == 200) {
							var carName = result.data.carName;
							localStorage.setItem("carName", scarName);
							document.getElementById('carName').value = carName;
						} else {
							alert('获取数据异常,请重新登录');
							//window.location.href = 'Login.html';
						}
					},
					error: function(data) { //若果传过来的数据为空
					}
				});
			}

			function end() {
				var ip = localStorage.getItem("ip");
				var token = localStorage.getItem("token");
				var userId = localStorage.getItem("userId");
				var startTime = localStorage.getItem("startTime");
				var startPlace = localStorage.getItem("startPlace");
				var carId = localStorage.getItem("carId");
				var url = ip + "car/travel";
				var formData = new FormData($('#dataForm')[0]);
				formData.append("userId", userId);
				formData.append("startTime", startTime);
				formData.append("startPlace", startPlace);
				formData.append("token", token);
				$.ajax({
					cache: false,
					type: "POST",
					url: url,
					data: formData,
					processData: false,
					contentType: false,
					error: function(request) {},
					success: function(data) {
						var a = JSON.parse(data)
						alert(a.msg);
						if("成功" == a.msg) {
							window.location.href = 'vehicleManageList.html';
						}
					}
				});
				localStorage.removeItem('state');
			}
		</script>
	</head>

	<body style="background: #d9d9d9;">
		<form action="#" method="post" id="dataForm" enctype="multipart/form-data">
			<div style=" background: white; width: 90%; margin-left: 5%;margin-top: 10%; box-shadow:1px 2px 1px 1px #aaa;-webkit-border-radius: 10px;">
				<label></label><br />
				<label></label><br />
				<label>车&nbsp;&nbsp;牌&nbsp;&nbsp;号:</label>
				<select onchange="carNumSelect()" id="carNum" class="txt" name="carId">
				</select><br />
				<label>车辆名称:</label>
				<input type="text" id="carName" class="txt" /><br />
				<div class="start" style="display:none;">
					<label>开始时间:</label>
					<input type="text" id="startTime" class="txt" /><br />
					<label>起始地点:</label>
					<input type="text" id="startPlace" class="txt" /><br />
				</div>
				<div class="end" style="display:none;">
					<label>结束时间:</label>
					<input type="text" id="endTime" class="txt" name="endTime" /><br />
					<label>目&nbsp;&nbsp;的&nbsp;&nbsp;地:</label>
					<input type="text" id="endPlace" class="txt" name="endPlace" /><br />
				</div>
				<label>描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述:</label>
				<input type="text" id="describe" class="txt" name="describe" /><br />
				<label style="margin-top: 1px;">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</label>
				<textarea class="txt" id="remark" style="height:70px;" name="remark"></textarea><br />
				<div class="trip" style="display:none;">
					<label>行程公里:</label>
					<input type="text" id="trueTrip" class="txt" name="trueTrip" /><br />
				</div>
				<input type="button" onclick="start()" value="开始行程" id="startTrip" class="txt" style=" display:none; font-weight:bold; font-size: calc(15vw/3.75); color: white; height: 40px; margin-left: 15%;margin-top: 25%;background: #33ff99;" /><br />
				<input type="button" onclick="end()" value="结束行程" id="endTrip" class="txt" style=" display:none; font-weight:bold; font-size: calc(15vw/3.75); color: white; height: 40px; margin-left: 15%;margin-top: 25%;background: red;" /><br />
				<label></label><br />
				<label></label><br />
				<label></label><br />
			</div>
		</form>
	</body>

</html>